import { TodoListProps } from '../types';
import { Button } from 'antd';


/** 待办事项列表 */
export default function TodoList({ todos,onToggle,onDelete }: TodoListProps) {

  return (
    <div className="w-full flex flex-col gap-2">
      {todos.map((todo) => (
        <div key={todo.id} className='flex gap-2 items-center justify-between border-b  border-gray-200 py-2'>
          <div className="text-xl" style={{textDecorationLine:todo.completed?'line-through':'none'}}>{todo.text}</div>
          <div>
          <Button className="mx-2" color="primary" variant="solid" onClick={() => onToggle(todo.id)}>切换</Button>
          <Button color="danger" variant="solid" onClick={() => onDelete(todo.id)}>删除</Button>
          </div>
        </div>
      ))}
    </div>
  );
}
